<template>
	<view class="learning-plan-container">
		<view class="header">
			<text class="title">学习规划</text>
		</view>
		
		<!-- 学习信息表单 -->
		<view class="plan-form">
			<view class="form-item">
				<text class="required">*</text>
				<text class="label">学习目标</text>
				<textarea
					v-model="formData.goal"
					class="textarea"
					placeholder="请描述你的学习目标，例如：想要提高数学成绩"
				/>
			</view>
			
			<view class="form-item">
				<text class="required">*</text>
				<text class="label">当前水平</text>
				<picker
					@change="handleLevelChange"
					:value="levelIndex"
					:range="levelOptions"
					class="picker"
				>
					<view class="picker-text">{{ levelOptions[levelIndex] || '请选择当前水平' }}</view>
				</picker>
			</view>
			
			<view class="form-item">
				<text class="label">每周可用时间</text>
				<picker
					@change="handleTimeChange"
					:value="timeIndex"
					:range="timeOptions"
					class="picker"
				>
					<view class="picker-text">{{ timeOptions[timeIndex] || '请选择可用时间' }}</view>
				</picker>
			</view>
			
			<view class="form-item">
				<text class="label">近期测试结果</text>
				<picker
					@change="handleTestResultChange"
					:value="selectedResultIndex"
					:range="testResults"
					range-key="name"
					class="picker"
				>
					<view class="picker-text">
						{{ selectedResult ? selectedResult.name : '选择测试结果（可选）' }}
					</view>
				</picker>
			</view>
			
			<view class="form-item" v-if="selectedResult">
				<text class="label">测试结果详情</text>
				<view class="result-analysis">
					<view class="result-item">
						<text class="result-label">科目：</text>
						<text class="result-value">{{ selectedResult.subjectName || '未知' }}</text>
					</view>
					<view class="result-item">
						<text class="result-label">得分：</text>
						<text class="result-value">{{ selectedResult.score || 0 }}</text>
					</view>
					<view class="result-item">
						<text class="result-label">分析：</text>
						<text class="result-value">{{ selectedResult.analysis || '暂无分析' }}</text>
					</view>
					<view class="result-item" v-if="selectedResult.resultDesc">
						<text class="result-label">详细说明：</text>
						<text class="result-value">{{ selectedResult.resultDesc }}</text>
					</view>
				</view>
			</view>
			
			<view class="form-actions">
				<button 
					class="submit-btn" 
					@tap="generatePlan"
					:disabled="!canSubmit || loading"
					:loading="loading"
				>
					{{ loading ? '生成中...' : '生成学习计划' }}
				</button>
				<button class="reset-btn" @tap="resetForm">重置</button>
			</view>
		</view>
		
		<!-- AI学习建议 -->
		<view class="plan-result" v-if="planResult">
			<view class="section-title">学习概览</view>
			<view class="overview-content">
				<text>{{ planResult.overview }}</text>
				<text class="total-duration">建议学习时长：{{ planResult.totalDuration }}小时</text>
			</view>
			
			<!-- 学习路径时间轴 -->
			<view class="section-title">学习路径</view>
			<view class="learning-timeline">
				<view 
					class="timeline-item" 
					v-for="(course, index) in planResult.recommendedCourses" 
					:key="course.courseId"
				>
					<view class="timeline-left">
						<view class="timeline-dot"></view>
						<view class="timeline-line" v-if="index !== planResult.recommendedCourses.length - 1"></view>
					</view>
					<view class="timeline-content">
						<view class="course-card" @tap="navigateToCourse(course.courseId)">
							<image class="course-image" :src="course.courseImage" mode="aspectFill"></image>
							<view class="course-info">
								<view class="course-header">
									<text class="course-order">步骤 {{ course.learningOrder }}</text>
									<text class="course-duration">{{ course.suggestedDuration }}小时</text>
								</view>
								<text class="course-name">{{ course.courseName }}</text>
								<view class="course-points">
									<text class="point-item" v-for="(point, pointIndex) in course.keyPoints" :key="pointIndex">
										{{ point }}
									</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 学习建议 -->
			<view class="section-title">学习建议</view>
			<view class="recommendations">
				<text>{{ planResult.recommendations }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import request from '@/utils/request'

// 表单数据
const formData = ref({
	goal: '',
	level: '',
	time: '',
	style: '',
	subjects: [],
	additionalInfo: ''
})

// 选项数据
const levelOptions = ['初级', '中级', '高级']
const timeOptions = ['0-5小时', '5-10小时', '10-20小时', '20小时以上']
const styleOptions = ['视频学习', '文字学习', '实践练习', '互动讨论']

// 选择器索引
const levelIndex = ref(-1)
const timeIndex = ref(-1)
const styleIndex = ref(-1)

// 处理选择器变化
const handleLevelChange = (e) => {
	levelIndex.value = e.detail.value
	formData.value.level = levelOptions[e.detail.value]
}

const handleTimeChange = (e) => {
	timeIndex.value = e.detail.value
	formData.value.time = timeOptions[e.detail.value]
}

const handleStyleChange = (e) => {
	styleIndex.value = e.detail.value
	formData.value.style = styleOptions[e.detail.value]
}

// 加载状态
const loading = ref(false)

// 计划结果
const planResult = ref(null)

// 测试结果数据
const testResults = ref([])
const selectedResult = ref(null)
const selectedResultIndex = ref(-1)

// 获取测试结果列表
const loadTestResults = async () => {
	try {
		const response = await request({
			url: '/api/userAnswer/my/list/page/vo',
			method: 'POST',
			data: {
				current: 1,
				pageSize: 10
			}
		})
		
		if (response.code === 0 && response.data) {
			testResults.value = (response.data.records || []).map(item => ({
				...item,
				name: `${item.examName || '未命名测试'} (${item.createTime || '未知时间'})`
			}))
		}
	} catch (error) {
		console.error('获取测试结果失败:', error)
		uni.showToast({
			title: '获取测试结果失败',
			icon: 'none'
		})
	}
}

// 选择测试结果
const handleTestResultChange = (e) => {
	selectedResultIndex.value = parseInt(e.detail.value)
	selectedResult.value = testResults.value[selectedResultIndex.value]
	if (selectedResult.value) {
		formData.value.additionalInfo = `测试科目: ${selectedResult.value.subjectName || '未知'}\n` +
			`测试得分: ${selectedResult.value.score || 0}\n` +
			`测试分析: ${selectedResult.value.analysis || '暂无分析'}\n` +
			`详细说明: ${selectedResult.value.resultDesc || '暂无'}`
	}
}

// 是否可以提交
const canSubmit = computed(() => {
	return formData.value.goal && formData.value.level
})

// 生成学习计划
const generatePlan = async () => {
	if (!canSubmit.value) {
		uni.showToast({
			title: '请填写学习目标和当前水平',
			icon: 'none'
		})
		return
	}
	
	loading.value = true
	try {
		const response = await request({
			url: '/api/AI/plan',
			method: 'POST',
			data: {
				currentLevel: formData.value.level,
				targetGoal: formData.value.goal,
				availableTime: formData.value.time || '0-5小时',
				additionalInfo: formData.value.additionalInfo || ''
			}
		})
		
		if (response.code === 0 && response.data) {
			// 解析返回的JSON字符串
			planResult.value = JSON.parse(response.data)
			uni.showToast({
				title: '计划生成成功',
				icon: 'success'
			})
		}
	} catch (error) {
		console.error('生成计划失败:', error)
		uni.showToast({
			title: '生成计划失败',
			icon: 'none'
		})
	} finally {
		loading.value = false
	}
}

// 重置表单
const resetForm = () => {
	formData.value = {
		goal: '',
		level: '',
		time: '',
		style: '',
		subjects: [],
		additionalInfo: ''
	}
	levelIndex.value = -1
	timeIndex.value = -1
	styleIndex.value = -1
	selectedResultIndex.value = -1
	selectedResult.value = null
	planResult.value = null
}

// 在页面加载时获取测试结果
onMounted(() => {
	loadTestResults()
})

// 添加跳转方法
const navigateToCourse = (courseId) => {
	uni.navigateTo({
		url: `/pages/course/detail?id=${courseId}`,
		fail: (err) => {
			console.error('跳转失败:', err)
			uni.showToast({
				title: '跳转失败',
				icon: 'none'
			})
		}
	})
}
</script>

<style scoped>
.learning-plan-container {
	padding: 30rpx;
	background-color: #f6f7f9;
	min-height: 100vh;
}

.header {
	margin-bottom: 30rpx;
}

.title {
	font-size: 42rpx;
	font-weight: bold;
	color: #333;
}

.plan-form {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
}

.form-item {
	margin-bottom: 30rpx;
}

.required {
	color: #ff4d4f;
	margin-right: 4rpx;
}

.label {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 16rpx;
	display: block;
}

.textarea {
	width: 94%;
	height: 160rpx;
	background-color: #f5f7fa;
	border-radius: 12rpx;
	padding: 20rpx;
	font-size: 28rpx;
}

.picker {
	background-color: #f5f7fa;
	border-radius: 12rpx;
	padding: 20rpx;
}

.picker-text {
	font-size: 28rpx;
	color: #333;
}

.subjects-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.subject-tag {
	background-color: #f5f7fa;
	border-radius: 12rpx;
	padding: 10rpx 20rpx;
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.delete-icon {
	color: #ff4d4f;
	font-size: 24rpx;
}

.add-subject {
	background-color: #007aff;
	color: #fff;
	border-radius: 12rpx;
	padding: 10rpx 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.form-actions {
	display: flex;
	gap: 20rpx;
	margin-top: 40rpx;
}

.submit-btn, .reset-btn {
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 28rpx;
	border-radius: 12rpx;
}

.submit-btn {
	background: #007aff;
	color: #fff;
}

.submit-btn[disabled] {
	opacity: 0.6;
	background: #007aff !important;
}

.reset-btn {
	background: #f5f7fa;
	color: #666;
}

.plan-result {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
	color: #333;
}

.result-content {
	font-size: 28rpx;
	line-height: 1.6;
	color: #333;
}

.schedule {
	margin-top: 30rpx;
}

.schedule-item {
	margin-bottom: 20rpx;
}

.day {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
	display: block;
}

.schedule-content {
	background-color: #f5f7fa;
	border-radius: 12rpx;
	padding: 20rpx;
}

.time-block {
	margin-bottom: 16rpx;
}

.time-block:last-child {
	margin-bottom: 0;
}

.time {
	font-size: 24rpx;
	color: #666;
	margin-right: 20rpx;
}

.subject {
	font-size: 28rpx;
	color: #333;
	margin-right: 20rpx;
}

.task {
	font-size: 24rpx;
	color: #666;
}

.tips {
	margin-top: 30rpx;
}

.tip-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 16rpx;
}

.tip-icon {
	margin-right: 10rpx;
	color: #007aff;
}

.tip-content {
	font-size: 28rpx;
	color: #333;
	flex: 1;
	line-height: 1.6;
}

.result-analysis {
	background-color: #f5f7fa;
	border-radius: 12rpx;
	padding: 20rpx;
}

.result-item {
	margin-bottom: 16rpx;
}

.result-item:last-child {
	margin-bottom: 0;
}

.result-label {
	font-size: 26rpx;
	color: #666;
	margin-right: 10rpx;
}

.result-value {
	font-size: 28rpx;
	color: #333;
	line-height: 1.6;
}

.test-result-item {
	background-color: #f5f7fa;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.test-result-name {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.test-result-desc {
	font-size: 26rpx;
	color: #666;
	line-height: 1.5;
}

.overview-content {
	background-color: #f5f7fa;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 30rpx;
}

.total-duration {
	display: block;
	margin-top: 16rpx;
	color: #007aff;
	font-weight: bold;
}

.learning-timeline {
	padding: 20rpx 0;
}

.timeline-item {
	display: flex;
	margin-bottom: 40rpx;
}

.timeline-left {
	position: relative;
	width: 60rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.timeline-dot {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	background-color: #007aff;
	z-index: 1;
}

.timeline-line {
	position: absolute;
	top: 20rpx;
	width: 4rpx;
	height: calc(100% + 40rpx);
	background-color: #e8e8e8;
}

.timeline-content {
	flex: 1;
	padding-left: 20rpx;
}

.course-card {
	background-color: #fff;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.course-card:hover {
	transform: translateY(-4rpx);
	box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.15);
}

.course-image {
	width: 100%;
	height: 300rpx;
}

.course-info {
	padding: 20rpx;
}

.course-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10rpx;
}

.course-order {
	color: #007aff;
	font-weight: bold;
	font-size: 28rpx;
}

.course-duration {
	color: #666;
	font-size: 24rpx;
}

.course-name {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 16rpx;
}

.course-points {
	display: flex;
	flex-wrap: wrap;
	gap: 12rpx;
}

.point-item {
	background-color: #f5f7fa;
	color: #666;
	font-size: 24rpx;
	padding: 6rpx 16rpx;
	border-radius: 20rpx;
}

.recommendations {
	background-color: #f5f7fa;
	border-radius: 12rpx;
	padding: 20rpx;
	font-size: 28rpx;
	line-height: 1.6;
	color: #333;
}
</style> 